<!--
 * @Descripttion: 
 * @version: 
 * @Author: 尹伊
 * @Date: 2020-05-24 17:15:46
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-05-29 09:13:14
-->
<template>
  <div style="width: 100%;background-color: #ffffff;">
    <animate-number from="1" to="1000" duration="2000" :formatter="formatter"></animate-number>
    <animate-number from="1" to="100000" duration="3000"></animate-number>
    <animate-number ref="myNum" from="0" :to="number" mode="manual" :formatter="formatter"></animate-number><br>
    <button type="button" @click="startAnimate()"> animate! </button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        number: 10
      }
    },
    watch: {
      number(val) {
        this.number = val
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.number = 10
      },
      formatter: function (num) {
        return num.toFixed(5) //小数点后几位，数字就是几小数点后几位
      },
      startAnimate: function () {
        this.$refs.myNum.start()
      }
    }
  }
</script>